<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.30/vue.global.min.js" type="application/javascript"></script>
</head>
<body>
  
    <div id="app">
           <cp1></cp1>
           
           
    </div>

        
    
    <script>  
           const { defineProps , provide, inject, ref } = Vue;
           const app = Vue.createApp({  //  vue2 new Vue({})
                data(){
                    return {
                        showCp1: true
                    }
                },
                methods:{
                    fn1(res){
                        console.log('我是根组件的fn1',res)
                    }
                }
                
           })

           //    Vue.component()
           app.component('cp1',{
             template:`<div>    
                            我是cp1组件 
                            <div> t in cp1 {{ t }}</div>
                            <hr /> 
                            <cp2></cp2>
                        </div>`,    
             setup(props,ctx){
                console.log('props的数据',props)
               provide('k',456);

               // 在vue3当中 如果供应的是一个 ref对象 那么这个对象会全局共享，一直保持响应式
               const t = ref(1);
               provide('t', t)

            //    provide('p', 9999)


               return {
                t
               }
             }
           })

           app.component('cp2',{
             template:`<div>    
                            我是cp2组件
                            <hr /> 
                            <cp3></cp3>
                        </div>`,    
             setup(props,ctx){
              
            }
           })

           app.component('cp3',{
             template:`<div>    
                            我是cp3组件
                            <div> inject k is {{ k }} </div>
                            <div> inject t is {{ t }} </div>
                            <div> inject p is {{ p }} </div>
                            <button @click="t++"> 修改 t</button>
                        </div>`,    
             setup(props,ctx){
                const k = inject('k');
                const t =  inject('t');
                // 我们可以 对于inject设置第二个参数 ，就是默认值 如果得不到上层的供应就会采用默认值
                const p = inject('p',789)
                return {
                    k,
                    t,
                    p
                }
             }
           })

 
           app.mount('#app') //  vue2  app.$mount()
        

    </script>

</body>
</html>